// 1. 如何定义组件

// 类组件:
class Test extends React.Component {
  render() {
    return jsx / null
  }
}

// 函数组件
function Test() {
  return jsx / null
}

<Test></Test>
<Test />

// 2. 类组件操作状态
class Test extends React.Component {
    constructor(){
        super()
        this.state = {
            x: 1
        }
    }
    // state = {}
    render() {
      return <div>
        <div>{this.state.x}</div>
        <button onClick={()=>{
            this.setState({
                x: 10
            })
        }}></button>
      </div>
    }
  }
  

// 3. 类组件中this指向问题如何解决
class Test extends React.Component {
    constructor(){
        super()
        this.state = {
            x: 1
        }
    }
    // state = {}

    fn=()=>{
        this.setState({
            x: 10
        })
    }

    render() {
      return <div>
        <div>{this.state.x}</div>
        <button onClick={this.fn}></button>
      </div>
    }
  }

// 4. 组件操作props

// props的作用: 

// 组件需要外部数据的时候,可以通过props传递到组件内部 

// 父组件给子组件传递props数据 

// function Test() {
//     return <Son x={'abc'}></Son>
// }

// 在Son组件中如何接收?
// 类组件接收: this.props.x 
// 函数组件接收: 形参props.x


// props的注意点: 

// 1. props的数据是只读的
// 2. props可以传递接收任何数据
function Demo(){
    return <span></span>
}

function Test() {
    return <Son x={<p>test</p>} y={Demo}></Son>
}

function Son(props){
   return <div>
     {props.x}

     <props.y></props.y>
   </div> 
}


// props校验实现：
// 传递给Demo的属性是x数据类型是数字。
// 给Demo的props数据 y 添加默认值 'abc'
import PropTypes from 'prop-types'
function Demo(){
    return <span></span>
}

Demo.propTypes = {
    x: PropTypes.number.isRequired
}

Demo.defaultProps = {
    y: 'abc'
}



